<template>
  <div class="center-container">
    <div class="inventory-container">
      <span>选择仓库开始盘库</span>
      <el-divider></el-divider>
      <el-form :model="form" label-width="100px">
        <el-form-item label="仓库" prop="warehouseId">
          <el-select
            v-model="form.warehouseId"
            placeholder="请选择仓库"
            style="width: 65%"
          >
            <el-option
              v-for="item in warehouseSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="库区" prop="warehouseAreaId">
          <el-select
            v-model="form.warehouseAreaId"
            placeholder="请选择库区"
            style="width: 65%"
            :disabled="!form.warehouseId"
          >
            <el-option
              v-for="item in warehouseAreaSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="货架" prop="warehouseRackId">
          <el-select
            v-model="form.warehouseRackId"
            placeholder="请选择货架"
            style="width: 65%"
            :disabled="!form.warehouseAreaId"
          >
            <el-option
              v-for="item in warehouseRackSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="货位" prop="warehouseLocationId">
          <el-select
            v-model="form.warehouseLocationId"
            placeholder="请选择货位"
            style="width: 65%"
            :disabled="!form.warehouseRackId"
          >
            <el-option
              v-for="item in warehouseLocationSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <div class="button-container">
        <el-button
          type="primary"
          @click="startInventory"
          :disabled="!form.warehouseLocationId"
        >
          开始盘库
        </el-button>
        <el-button
          type="primary"
          @click="handleCancel"
          style="background: white; border-color: #dcdfe6; color: #606266;"
        >
          取消
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {getInventoryCheckOrderNo} from "@/api/system/wmsInventoryCheck";
import divider from "@/components/divider/index.vue";
import {
  getWarehouseAreaSelectByWarehouseId,
  getWarehouseRackSelectWarehouseAreaId, getWarehouseSelect,
  getWmsWarehouseLocationSelectByRackId
} from "@/api/system/selectVo";

export default {
  components: {divider},
  data() {
    return {
      form: {
        warehouseId: null,
        warehouseAreaId: null,
        warehouseRackId: null,
        warehouseLocationId: null
      },
      warehouseSelect: [],
      warehouseAreaSelect: [],
      warehouseRackSelect: [],
      warehouseLocationSelect: []
    }
  },
  watch:{
    'form.warehouseId'(newVal) {
      this.form.warehouseAreaId=null
      getWarehouseAreaSelectByWarehouseId(this.form.warehouseId).then(response => {
        this.warehouseAreaSelect=response.data
      })
    },
    'form.warehouseAreaId'(newVal) {
      this.form.warehouseRackId=null;
      if(this.form.warehouseAreaId){
        getWarehouseRackSelectWarehouseAreaId(this.form.warehouseAreaId).then(response => {
          this.warehouseRackSelect=response.data
        })
      }
    },
    'form.warehouseRackId'(newVal) {
      this.form.warehouseLocationId=null;
      this.disabled = true;
      if(this.form.warehouseRackId){
        getWmsWarehouseLocationSelectByRackId(this.form.warehouseRackId).then(response => {
          this.warehouseLocationSelect=response.data
        })
      }
    },
  },
  created() {
    this.getWarehouseSelect();
  },
  methods: {
    getWarehouseSelect(){
      getWarehouseSelect().then(response => {
        this.warehouseSelect = response.data;
      })
    },
    startInventory() {
      getInventoryCheckOrderNo().then(response => {
        var addFormQueryParam = {};
        addFormQueryParam.inventoryCheckOrderNo = response.data.inventoryCheckOrderNo;
        addFormQueryParam.warehouseId = this.form.warehouseId;
        addFormQueryParam.warehouseAreaId = this.form.warehouseAreaId;
        addFormQueryParam.warehouseRackId = this.form.warehouseRackId;
        addFormQueryParam.warehouseLocationId = this.form.warehouseLocationId;
        this.$emit("addInventoryCheck",addFormQueryParam);
        this.$message.success(`开始盘库: 仓库${this.form.warehouseId} 货位${this.form.warehouseLocationId || '所有货位'}`);
      })
    },
    handleCancel(){
      this.$emit("handleCancel");
    },
  }
}
</script>

<style scoped lang="scss">
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 确保容器至少和视口一样高 */
  width: 100%;
}

.inventory-container {
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 30%; /* 控制宽度 */
  max-width: 800px; /* 最大宽度限制 */

  .button-container {
    margin-top: 30px;
    text-align: center;

    .el-button {
      width: 150px;
      height: 40px;
      font-size: 16px;
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .inventory-container {
    width: 95%;
    padding: 20px;

    .el-form-item {
      margin-bottom: 15px;
    }
  }
}
</style>
